@charset "UTF-8";
html {
  background-color: #22312d;
  font-family: "楷体", "楷体_GB2312", "KaiTi", serif;
}
html::before {
  content: "";
  display: block;
  height: 30px;
  background-color: #22312d;
  position: sticky;
  top: 0;
}

body {
  margin: 0;
}

article {
  background-color: #f5ebd4;
  padding: 1em 0.5em;
  border-left: 10px solid #405c53;
  border-right: 10px solid #405c53;
  margin: 0 15px;
}
article p {
  margin: 0;
  padding: 0.2em 0;
  color: #2c402e;
  line-height: 150%;
  text-indent: 2em;
}

.reel {
  position: sticky;
  top: 10px;
  height: 28px;
  margin: 0 15px;
  border-radius: 1px;
  -o-border-image: url(../assets/images/reel.png) 40 36/14px 12px/0 12px;
     border-image: url(../assets/images/reel.png) fill 40 36/14px 12px/0 12px;
  box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.3), 0 10px 20px 10px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.reel .reel-bg {
  position: absolute;
  left: 0;
  width: 100%;
  height: 368px;
  background: url(../assets/images/texture.jpg) 50% 0/auto 50%;
  mix-blend-mode: multiply;
}

@supports (animation-timeline: scroll()) {
  .reel-bg {
    --s: 999999;
    animation: scroll 1s linear forwards calc(var(--s) / 184 / 3.14);
    animation-timeline: scroll(root);
    animation-range: 0 calc(var(--s) * 1px);
  }
}
@keyframes scroll {
  0% {
    transform: translateY(-80%);
  }
  100% {
    transform: translateY(-30%);
  }
}
::-webkit-scrollbar {
  display: none;
}